<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>学生基本信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<style>
    .layui-table select{
        display: block;
        height: 30px;
    }
</style>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/layui/layui.all.js"></script>
 <script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script>
<body>
<div th:if="${messages}">
    <h2 th:text="${messages}"/>
</div>
<div id="box">
    <input type="text" name="search" placeholder="请输入身份证" id="idCard">
    <input type="text" name="search" placeholder="请输入学生姓名" id="studentName">
    <button id="search" type="button" class="layui-btn layui-btn-normal">搜索</button>

</div>
<div>
    <form method="post" enctype="multipart/form-data" action="/studentCompleteData/upLoadStudentEssentialInformation">
        <table>
            <tr>
                <td>上传文件：</td>
                <td><input type="file" name="file" /></td>
            </tr>

            <tr>
                <td></td>
                <td><input type="submit" value="上传" /></td>
            </tr>
        </table>
    </form>


</div>
<button type="button" onclick="downExcel()">基础数据表模板下载</button>
<div>
    <ul>
        <li th:each="file : ${files}">
            <a th:href="${file}" th:text="${file}" />
        </li>
    </ul>
</div>
<table id="test3" lay-filter="test3" class="layui-hide"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="update" style="display:none;">保存</a>
</script>
<script>
    // var data = [
    //     {
    //         "idCard":'123',
    //         "photoNumber":'123',
    //         "political":123,
    //         "studentImgUrl":'123',
    //         "studentXJ":0
    //     },
    //     {
    //         "idCard":'123',
    //         "photoNumber":'123',
    //         "political":123,
    //         "studentImgUrl":'123',
    //         "studentXJ":1
    //     },
    //     {
    //         "idCard":'123',
    //         "photoNumber":'123',
    //         "political":123,
    //         "studentImgUrl":'123',
    //         "studentXJ":2
    //     },
    //     {
    //         "idCard":'123',
    //         "photoNumber":'123',
    //         "political":123,
    //         "studentImgUrl":'123',
    //         "studentXJ":2
    //     }
    // ]
    function findData(idCard,studentName){
        layui.use('table', function () {
            // debugger;
            var table = layui.table;
            table.render({
                elem: '#test3',
                // data:data
                url:'findAllStudentCompleteData'
                ,parseData: function(res) {
                    return {
                        "code":'0', //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count":res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    }
                }
                , cols: [
                    [
                        {field: 'id',title: '序号', type: 'numbers', Width: 20}
                        , {field: 'id',title: 'id'}
                        , {field: 'biogenicLand',title: '生源地'}
                        , {field: 'biogenicLandType',title: '生源地类型'}
                        , {field: 'stuId',title: '学号'}
                        , {field: 'schoolstatus',title: '在校状态'}
                        , {field: 'studentName', title: '学生姓名', minWidth: 120}
                        , {field: 'nameUsedBefore', title: '曾用名', minWidth: 120}
                        , {
                        field: 'idCard',
                        title: '身份证',
                        minWidth: 120,
                        sort: true
                    }
                        , {field: 'education', title: '学历', minWidth: 120}
                        , {field: 'isinSchool', title: '是否在校', minWidth: 120}
                        , {field: 'changeType', title: '异动类别', minWidth: 120}
                        , {field: 'changeRemarks', title: '异动备注', minWidth: 120}
                        , {field: 'families', title: '科类', minWidth: 120}
                        , {field: 'stuType', title: '考生类别', minWidth: 120}
                        , {field: 'studyYear', title: '学习年限', minWidth: 120}
                        , {field: 'schLength', title: '学制', minWidth: 120}
                        , {field: 'level', title: '学历级别', minWidth: 120}
                        , {field: 'major', title: '专业', minWidth: 120}
                        , {field: 'majorCode', title: '专业代号', minWidth: 120}
                        , {field: 'classes', title: '班级', minWidth: 120}
                        , {field: 'graduationcertificatenum', title: '毕业证编号', minWidth: 120}
                        , {field: 'nativeplace', title: '籍贯', minWidth: 120}
                        , {field: 'sex', title: '性别', minWidth: 120}
                        , {field: 'nation', title: '民族', minWidth: 120}
                        , {field: 'admissionTime', title: '入学时间', minWidth: 120}
                        , {field: 'graduationTime', title: '毕业时间', minWidth: 120}
                        , {field: 'examineeNum', title: '考生号', minWidth: 120}
                        , {field: 'normalSchStu', title: '师范生类别', minWidth: 120}
                        , {field: 'difficultStu', title: '困难生类别', minWidth: 120}
                        , {field: 'studentXJ', title: '学籍状态',  minWidth: 120, sort: true}
                        , {field: 'entrance', title: '入学口', minWidth: 80,}
                        , {field: 'studentStatus', title: '学生状态', minWidth: 100,}
                        , {field: 'political', title: '政治面貌', minWidth: 80, }
                        , {field: 'familyPhotoNumber', title: '家庭电话', minWidth: 80}
                        , {field: 'studentAddress', title: '家庭住址', minWidth: 80}
                        , {field: 'photoNumber', title: '电话号码', minWidth: 80}
                        , {field: 'studentImgUrl', title: '头像url', minWidth: 80}
                        , {field: 'dormitoryInformation', title: '住宿具体信息', minWidth: 80}
                        , {field: 'dormitoryBuilding', title: '宿舍楼栋', minWidth: 80}
                        , {field: 'dormitoryUnits', title: '宿舍单元', minWidth: 80}
                        , {field: 'dormitoryFloor', title: '宿舍楼层', minWidth: 80}
                        , {field: 'dormitoryRoom', title: '寝室号', minWidth: 80}
                        , {fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barDemo'}
                    ]
                ]
                , page: true
                ,where : {
                    idCard:idCard,
                    studentName:studentName
                }
                , done: function (res, curr, count) {
                    for (var i = 0; i < res.data.length; i++)   //遍历返回数据
                    {
                       /* if (res.data[i].achievement > 100 || res.data[i].achievement < 0)    //设置条件
                        {
                            $("table tbody tr").eq(i + 2).find('td').eq(7).css('color', 'red')    //改变满足条件行的颜色
                        }*/
                        if (res.data[i].infoJudge=='false1')    //设置条件
                        {
                            $("table tbody tr").eq(i + 2).find('td').eq(2).css('color', 'red')    //改变满足条件行的颜色
                            $("table tbody tr").eq(i + 2).find('td').eq(3).css('color', 'red')    //改变满足条件行的颜色
                        }
                        if (res.data[i].infoJudge=='false2')    //设置条件
                        {
                            $("table tbody tr").eq(i + 2).find('td').eq(3).css('color', '')
                            $("table tbody tr").eq(i + 2).find('td').eq(2).css('color', 'red')    //改变满足条件行的颜色
                        }
                    }
                }

            });

            
            table.on('tool(test3)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'update') {
                    update(obj)
                }  else if (layEvent === 'edit') {
                    edit(obj)
                }
            });
        })
    }
    $(function(){
        findData(null,null);
    });
    $("#search").click(function () {
        debugger;
        var idCard=$("#idCard").val();
        var studentName=$("#studentName").val();
        findData(idCard,studentName);
    })
    
    // 点击编辑将所有单元格变为可编辑
    function edit(obj){
        var length = obj.tr.find('td').length
        obj.tr.find('td.layui-table-col-special').find('div').find('a').eq(0).hide()
        obj.tr.find('td.layui-table-col-special').find('div').find('a').eq(1).show()
        obj.tr.find('td').each((index,item) => {
            if (!$(item).hasClass('layui-table-col-special')) {
                var val = $(item).find('div').text();
                var name = $(item).data('field');
                var inputHtml = ''
                // 如果是下拉选择框
                // if (name === 'studentXJ') {
                //     inputHtml = `
                //     <select name="studentXJ">
                //         <option value="">请选择学籍状态</option>
                //         <option value="0" ${val === '有学籍' ? 'selected' : ''}>有学籍</option>
                //         <option value="1" ${val === '无学籍' ? 'selected' : ''}>无学籍</option>
                //
                //     </select>
                //     `
                // } else {
                    inputHtml = `<input class='layui-input' value=${val}>`
                //}
                $(item).html(inputHtml)
            }
        })
    }
    // 完成编辑后点击保存
    function update(dom) {
        var obj = {}
        var length = dom.tr.find('td').length
        dom.tr.find('td').each((index,item) => {
            if (!$(item).hasClass('layui-table-col-special')) {
                var val = '';
                var name = $(item).data('field');
                // if (name === 'studentXJ') {
                //     val = $(item).find('select').find('option:selected').val()
                //     console.log(val)
                // } else {
                    val = $(item).find('input').val()
                // }
                obj[name] = val
            }
        })
        // 获取到的所有数据
        console.log(obj)
        // 请求接口修改数据,请求成功后直接reload table
        $.ajax({
            type: 'get',
            url: "updateAllStudentCompleteData", // ajax请求路径
            data: obj,
            success: function (data) {
                findData(null,null);
            }
        });
        // dom.tr.find('td.layui-table-col-special').find('div').find('a').eq(0).show()
        // dom.tr.find('td.layui-table-col-special').find('div').find('a').eq(1).hide()
    }
</script>
<script>
    function downExcel() {
         window.open("http://127.0.0.1:8093/studentEssentialInformationFiles");
        //window.open("http://192.168.7.22:8093/studentEssentialInformationFiles");
    }
</script>
</body>
</html>